import createElement from "./createElement";
import patchVnode from "./pachVnode";

// 判断是否为同一个虚拟节点
function checkSameVnode(a, b) {
    return a.sel == b.sel && a.key == b.key
}


/**
 * 更新策略的实现
 * @param {*} parentElm 父节点
 * @param {*} oldch  老节点子元素
 * @param {*} newch  新节点子元素
 */
export default function updateChildren(parentElm, oldCh, newCh) {

    console.log("新子节点", newCh);
    console.log("新子节点", newCh);
    console.log("旧子节点", oldCh);
    let oldStartIdx = 0 //旧前指针
    let newStartIdx = 0 //新前指针
    let oldEndIdx = oldCh.length - 1 //旧后指针
    let newEndIdx = newCh.length - 1 //新后指针
    let oldStartVnode = oldCh[0] // 真正的旧前节点
    let oldEndVnode = oldCh[oldEndIdx] // 真正的旧后节点
    let newStartVnode = newCh[0] // 真正的新前节点
    let newEndVnode = newCh[newEndIdx] // 真正的新后节点

    // 开始while
    while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
        console.log("#");

        // 首先不是判断命中，而是要掠过已经加undefined标记的东西
        if (oldStartVnode === null || oldCh[oldStartIdx] === undefined) {
            oldStartVnode = oldCh[++oldStartIdx]
        } else if (oldEndVnode === null || oldCh[oldEndIdx] === undefined) {
            oldEndVnode = oldCh[--oldEndIdx]
        } else if (newStartVnode === null || newCh[newStartIdx] === undefined) {
            newStartVnode = newCh[++newStartIdx]
        } else if (newEndVnode === null || newCh[newEndIdx] === undefined) {
            newEndVnode = newCh[--newEndIdx]
        } else if (checkSameVnode(oldStartVnode, newStartVnode)) {
            // 新前节点和旧前节点相同
            console.log("1新前和旧前");
            // patchVnode(newStartVnode, oldStartVnode); //对比两个虚拟节点
            patchVnode(oldStartVnode, newStartVnode); //对比两个虚拟节点
            oldStartVnode = oldCh[++oldStartIdx] //先加加，再后移
            newStartVnode = newCh[++newStartIdx]
        } else if (checkSameVnode(oldEndVnode, newEndVnode)) {
            console.log("2新后和旧后");
            patchVnode(oldEndVnode, newEndVnode); //对比两个虚拟节点
            oldEndVnode = oldCh[--oldEndIdx]
            newEndVnode = newCh[--newEndIdx]
        } else if (checkSameVnode(oldStartVnode, newEndVnode)) {
            console.log("3新后和旧前");
            patchVnode(oldStartVnode, newEndVnode); //对比两个虚拟节点
            // 移动节点（插入节点）
            /**
             * 如何移动节点？
             * 只要插入到已经存在的DOM树上的节点
             */
            console.log(parentElm);
            parentElm.insertBefore(oldStartVnode.elm, oldEndVnode.elm.nextSibling)
            oldStartVnode = oldCh[++oldStartIdx]
            newEndVnode = newCh[--newEndIdx]

        } else if (checkSameVnode(oldEndVnode, newStartVnode)) {
            console.log("4新前和旧后");
            patchVnode(oldEndVnode, newStartVnode); //对比两个虚拟节点
            // 移动节点（插入节点）
            parentElm.insertBefore(oldEndVnode.elm, oldStartVnode.elm)
            oldEndVnode = oldCh[--oldEndIdx]
            newStartVnode = newCh[++newStartIdx]

        } else {
            // 都没有命中

        }
    }

}